<template>
  <div class="wrapper">
    <cardBlock>
      <a-tabs default-active-key="1" @change="handleTabChange">
        <a-tab-pane key="1" title="预约">
          <a-table :columns="appointmentColumns" :data="appointmentList" />
        </a-tab-pane>
        <a-tab-pane key="2" title="订单">
          <a-table :columns="orderColumns" :data="orderList">
            <template #optional="{ record }">
              <a-button @click="handleOrderClick(record)"> 售后 </a-button>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="3" title="售后">
          <a-table :columns="afterSalesColumns" :data="afterSalesList" />
        </a-tab-pane>
      </a-tabs>
    </cardBlock>
  </div>
  <modal
    :set-visible="setModalVisible"
    :visible="modalVisible"
    title="售后服务"
  >
    <div class="modal-wrapper">
      <a-form ref="formRef" :model="form" @submit="handleSubmit">
        <a-form-item field="requesttype" label="类型">
          <a-radio-group v-model="form.requesttype">
            <a-radio value="1">退货</a-radio>
            <a-radio value="2">更换</a-radio>
            <a-radio value="3">维修</a-radio>
            <a-radio value="4">投诉</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item field="requestreason" label="描述">
          <a-input v-model="form.requestreason" placeholder="请输入" />
        </a-form-item>

        <a-form-item>
          <a-button html-type="submit" @click="handleSubmit">提交</a-button>
        </a-form-item>
      </a-form>
    </div>
  </modal>
</template>

<script setup lang="ts">
import cardBlock from "@/components/common/card-block/index.vue";
import { commonRequest } from "@/utils/request";
import { onMounted, ref } from "vue";
import modal from "@/components/common/modal/index.vue";
import { reactive } from "vue";
import { Message } from "@arco-design/web-vue";

const userInfo = ref(null);
const appointmentList = ref([]);
const orderList = ref([]);
const afterSalesList = ref([]);
const modalVisible = ref(false);
const activeRecord = ref(null);
const form = reactive({
  productid: 0,
  requestreason: "",
  requesttype: "1",
  userid: 0,
});

const appointmentColumns = [
  {
    title: "状态",
    dataIndex: "status",
  },
  {
    title: "开始时间",
    dataIndex: "appointmenttime",
  },
  {
    title: "结束时间",
    dataIndex: "fulltime",
  },
  {
    title: "地址",
    dataIndex: "remarks",
  },
];

const orderColumns = [
  {
    title: "订单号",
    dataIndex: "ordernumber",
  },
  {
    title: "车辆编号",
    dataIndex: "carid",
  },
  {
    title: "车辆类型",
    dataIndex: "model",
  },
  {
    title: "价格",
    dataIndex: "totalamount",
  },
  {
    title: "操作",
    slotName: "optional",
  },
];
const afterSalesColumns = [
  {
    title: "车辆编号",
    dataIndex: "productid",
  },
  {
    title: "售后类型",
    dataIndex: "requesttype",
  },
  {
    title: "描述",
    dataIndex: "requestreason",
  },
];
const appointmentData = ref([]);

const getAppointment = async () => {
  const res = await commonRequest.post("/appointmentviewing/select", {
    id: userInfo.value.id,
    role: userInfo.value?.role,
  });
  if (res.data.code === 200) {
    appointmentList.value = res.data?.date ?? [];
  }
};

const getOrders = async () => {
  const res = await commonRequest.post("/orders/select", {
    id: userInfo.value.id,
    role: userInfo.value?.role,
  });
  if (res.data.code === 200) {
    orderList.value = res.data?.date ?? [];
  }
};

const setModalVisible = (v: boolean) => {
  modalVisible.value = v;
};

const handleOrderClick = async (item) => {
  activeRecord.value = item;
  setModalVisible(true);
};

const handleSubmit = async () => {
  form.productid = activeRecord.value.carid;
  form.userid = userInfo.value.id;
  console.log("data", form);

  const res = await commonRequest.post("/aftersalesservices/add", form);

  if (res.data.code === 200) {
    Message.success("申请成功");
    setModalVisible(false);
    form.requestreason = "";
  }
};

const getAfterSales = async () => {
  const res = await commonRequest.post("/aftersalesservices/select", {
    id: userInfo.value.id,
    role: userInfo.value?.role,
  });
  console.log("res", res);
  afterSalesList.value = res.data?.date ?? [];
};

const handleTabChange = (e) => {
  getAfterSales();
};

onMounted(() => {
  const userInfoJSON = localStorage.getItem("userInfo");
  userInfo.value = JSON.parse(userInfoJSON);
  getAppointment();
  getOrders();
  getAfterSales();
});
</script>

<style scoped>
.wrapper {
  padding: 24px;
}
</style>
